<template>
  <BaseDialog
    title="节点详情"
    :visible="visible"
    :auto-height="true"
    :width="816"
    class="page-dialog"
    :show-body="false"
    @open="handleOpen"
    @close="handleCacheClose"
  >
    <div v-loading="loading">
      <span class="page-dialog_line">基本信息</span>
      <div class="page-dialog_content">
        <div class="content-title">
          <div class="text-[#333333]">节点名称</div>
          <div>{{ nodeInfo?.name ?? '-' }}</div>
        </div>
        <div class="content-title">
          <div class="text-[#333333]">所属分组</div>
          <div>{{ nodeInfo?.group_name ?? '-' }}</div>
        </div>
        <div class="content-title">
          <div class="text-[#333333]">节点状态</div>
          <div>{{ getNodeStatus(nodeInfo?.node_status) }}</div>
        </div>
        <div class="content-title">
          <div class="text-[#333333]">TCC状态</div>
          <div>{{ getTccStatus(nodeInfo?.tcc_status) }}</div>
        </div>
        <div class="content-title">
          <div class="text-[#333333]">内核自带BBR</div>
          <div>{{ getBbrStatus(nodeInfo?.bbr_status) }}</div>
        </div>
        <div class="content-title">
          <div class="text-[#333333]">最近上报日期</div>
          <div>{{ formatUnix(nodeInfo?.last_reported_at) }}</div>
        </div>
        <div class="content-title">
          <div class="text-[#333333]">添加日期</div>
          <div>{{ formatUnix(nodeInfo?.created_at) }}</div>
        </div>
      </div>
      <span class="page-dialog_title">TCC版本信息</span>
      <div class="page-dialog_content">
        <div class="content-title">
          <div class="text-[#333333]">TCC版本信息</div>
          <div>{{ nodeInfo?.tcc_version ?? '-' }}</div>
        </div>
        <div class="content-title">
          <div class="text-[#333333]">最新版本</div>
          <div>{{ nodeInfo?.latest_tcc_version ?? '-' }}</div>
        </div>
      </div>
      <span class="page-dialog_title">配置信息</span>
      <div class="border-none page-dialog_content">
        <div class="content-title">
          <div class="text-[#333333]">系统信息</div>
          <div>{{ nodeInfo?.platform ?? '-' }}</div>
        </div>
        <div class="content-title">
          <div class="text-[#333333]">内核信息</div>
          <div>{{ nodeInfo?.kernel_version ?? '-' }}</div>
        </div>
        <div class="content-title">
          <div class="text-[#333333]">主板型号</div>
          <div>{{ nodeInfo?.kernel_arch ?? '-' }}</div>
        </div>
      </div>
      <span class="page-dialog_title">配置信息</span>
      <div class="border-none page-dialog_content">
        <div class="content-title">
          <div class="leading-6" v-for="item in nodeInfo?.ips">
            {{ item }}
          </div>
        </div>
      </div>
      <div
        class="h-0 overflow-hidden transition-all duration-500"
        :class="isShow ? 'h-[500px] overflow-auto' : ''"
      >
        <span class="page-dialog_title">MAC地址</span>
        <div class="border-none page-dialog_content">
          <div class="content-title">
            <div class="leading-6" v-for="item in nodeInfo?.macs">
              {{ item }}
            </div>
          </div>
        </div>
        <span class="page-dialog_title">CPU型号</span>
        <div class="border-none page-dialog_singleContent">
          <div class="content-title">
            <div
              class="leading-6"
              v-for="item in nodeInfo?.hardware?.cpu?.devices"
            >
              {{ `${item.model_name}/${item.cores}核/${item.vendor}` }}
            </div>
          </div>
        </div>
        <span class="page-dialog_title">硬盘大小</span>
        <div class="border-none page-dialog_singleContent">
          <div class="content-title">
            <div
              class="leading-6"
              v-for="item in nodeInfo?.hardware?.storage?.devices"
            >
              {{ `${item.name}/${item.model}/${item.size}` }}
            </div>
          </div>
        </div>
        <span class="page-dialog_title">内存大小</span>
        <div class="border-none page-dialog_singleContent">
          <div class="content-title">
            <div
              class="leading-6"
              v-for="item in nodeInfo?.hardware?.memory?.devices"
            >
              {{ `${item.manufacturer}/${item.type}/${item.size}` }}
            </div>
          </div>
        </div>
        <span class="page-dialog_title">网卡型号</span>
        <div class="border-none page-dialog_singleContent">
          <div class="content-title">
            <div
              class="leading-6"
              v-for="item in nodeInfo?.hardware?.network_controller?.devices"
            >
              {{ `${item.product}/${item.vendor}` }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <span @click="handleClick" class="text-[#2D61EE] cursor-pointer">{{
      isShow ? '收起' : '展开'
    }}</span>
  </BaseDialog>
</template>
<script lang="ts" setup>
import BaseDialog from '@/components/base-dialog'
import { NODE_STATUS, TCC_STATUS, BBR_STATUS } from '../state'
import { formatUnix } from '@/utils'
const emit = defineEmits(['refresh-table', 'closeDialog'])
const loading = ref(false)
const isShow = ref(false)
interface IProps {
  visible: boolean
  id: string
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  id: ''
})
const nodeInfo = ref()
//获取节点状态
const getNodeStatus = computed(
  () => (status: number) => NODE_STATUS[status] ?? '-'
)
//获取tcc状态
const getTccStatus = computed(
  () => (status: number) => TCC_STATUS[status] ?? '-'
)
//获取bbr状态
const getBbrStatus = computed(
  () => (status: number) => BBR_STATUS[status] ?? '-'
)
//通过id获取节点详情

const getNodeById = () => {
  loading.value = true
  get_node({ id: props.id })
    .then((res: any) => {
      nodeInfo.value = res
    })
    .finally(() => (loading.value = false))
}
const handleClick = () => {
  isShow.value = !isShow.value
}
//弹窗打开
const handleOpen = () => {
  getNodeById()
}
// 弹窗关闭
const handleCacheClose = () => {
  emit('closeDialog')
  emit('refresh-table')
}
</script>

<style lang="scss" scoped>
.page-dialog {
  &_line,
  &_title {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    color: #262626;
    letter-spacing: 0;
  }
  &_line::before {
    content: '';
    width: 2px;
    height: 8px;
    left: -6px;
    top: 25%;
    background: #3a6ff8;
    position: absolute;
  }
  &_singleContent {
    font-size: 12px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 22.5px;
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 15.25px;
    margin-bottom: 17.75px;
  }
  &_content {
    font-size: 12px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 22.5px;
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 15.25px;
    margin-bottom: 17.75px;
    .content-title {
      display: flex;
      flex-direction: column;
      div:nth-child(2) {
        margin-top: 8px;
      }
    }
  }
}
</style>
